<template>
    <!-- 表格组件 -->
    <el-table :data="tableData" border>
        <el-table-column width="180" label="日期">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.video_create_time }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column width="180" label="名称" prop="video_title" />
        <el-table-column width="100" label="分类" prop="video_navigate" />
        <el-table-column label="视频介绍">
            <template #default="scope">
                <span>{{ scope.row.video_text.slice(0, 60) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="视频地址">
            <template #default="scope">
                <a :href="scope.row.video_src" target="_blank">视频链接</a>
            </template>
        </el-table-column>

        <el-table-column label="封面地址">
            <template #default="scope">
                <a :href="scope.row.video_pic" target="_blank">封面链接</a>
            </template>
        </el-table-column>
        <el-table-column width="80" label="作者">
            <template #default="scope">
                <span>{{ scope.row.video_author }}</span>
            </template>
        </el-table-column>
        <el-table-column>
            <template #header>操作</template>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin-top:20px">
        <el-pagination layout="prev, pager, next" :total="total2" @prev-click="handlePrevChange"
            @next-click="handleNextChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts" setup>
// 导入消息提示框
import { ElMessage } from 'element-plus';
import { reactive, ref, onMounted } from 'vue';
import { videoAllApi, videoRemoveApi, videoItemsApi } from '../../http/request';
import moment from "moment";
// 导入创建路由方法
import { useRouter } from 'vue-router';
// 定义路由
const $router = useRouter();
// 用户临时身份token
let token = localStorage.getItem('token');
// 定义数据结构
interface Video2 {
    video_create_time: string
    video_title: string
    video_text: string
    video_author: string
    video_id: string,
    video_navigate: string,
}
// 记录数据
let tableData: Video2[] = reactive([]);
// 交互行为1
const handleEdit = (index: number, row: Video2) => {
    // console.log('edit',index, row)
    $router.push({ path: '/video/add', query: { video_id: row.video_id } })
}
// 交互行为2
const handleDelete = (index: number, row: Video2) => {
    // 获取内容id
    let video_id = row.video_id;
    // console.log("图片ID:",video_id);
    if (confirm('您确定删除该内容吗')) {
        // 删除内容
        videoRemoveApi({ token, video_id })
            .then(
                (data: any) => {
                    if (data.code == 200) {
                        tableData.splice(index, 1)
                    }
                    // 提示
                    ElMessage({
                        message: data.msg,
                        type: 'warning',
                    });
                }
            )
    }
}
// 初始化内容列表
const initVideo2List = async (page_num: number | any, page_size: number | any) => {
    // 调用内容列表接口
    await videoItemsApi({ page_num, page_size })
        .then(
            (data: any) => {
                if (data.code == 200) {
                    // console.log(tableData);
                    tableData.splice(0, tableData.length);
                    let { result } = data;
                    result.map((item: any) => {
                        if (item.video_create_time) {
                            item.video_create_time = moment(new Date(item.video_create_time)).format('YYYY-MM-DD hh:mm:ss')
                        }
                        tableData.push(item)
                    });
                }
            }
        )
}
// 初始化 
// initVideo2List(1, 10);
onMounted(() => {
    initVideo2List(1, 10);
    // ElMessage({
    //     message: '发现新内容，自动更新中...',
    //     type: 'success',
    //     showClose: true,
    //     duration: 1500,
    //     onClose: () => {
    //         initVideo2List(1, 10);
    //     },
    // });
})

// 分页处理
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    initVideo2List(val, 10);
}
const handlePrevChange = (val: number) => {
    console.log(`prev page: ${val}`)
    initVideo2List(val, 10);
}
const handleNextChange = (val: number) => {
    console.log(`next page: ${val}`)
    initVideo2List(val, 10);
}

// 统计用户数量
let total2 = ref(50);
videoAllApi()
    .then(
        data => {
            if (data.code == 200) {
                //console.log(data)
                total2.value = data.total;
            }
        }
    )
</script>